<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>谷歌NEXUS网站菜单</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="js/modernizr.custom.js"></script>
</head>
<body>

<div class="container">
    <ul id="gn-menu" class="gn-menu-main">
        <li class="gn-trigger">
            <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
            <nav class="gn-menu-wrapper">
                <div class="gn-scroller">
                    <ul class="gn-menu">
                        <li class="gn-search-item">
                            <input placeholder="Search" type="search" class="gn-search">
                            <a class="gn-icon gn-icon-search"><span>
									Search</span></a>
                        </li>
                        <li>
                            <a class="gn-icon gn-icon-download">
                                Downloads</a>
                            <ul class="gn-submenu">
                                <li><a class="gn-icon gn-icon-illustrator">
                                    Vector Illustrations</a></li>
                                <li><a class="gn-icon gn-icon-photoshop">
                                    Photoshop files</a></li>
                            </ul>
                        </li>
                        <li><a class="gn-icon gn-icon-cog">Settings</a></li>
                        <li><a class="gn-icon gn-icon-help">Help</a></li>
                        <li>
                            <a class="gn-icon gn-icon-archive">Archives</a>
                            <ul class="gn-submenu">
                                <li><a class="gn-icon gn-icon-article">
                                    Articles</a></li>
                                <li><a class="gn-icon gn-icon-pictures">
                                    Images</a></li>
                                <li><a class="gn-icon gn-icon-videos">
                                    Videos</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /gn-scroller -->
            </nav>
        </li>
        <li><a href="http://sc.chinaz.com/">Codrops</a></li>
        <li><a class="codrops-icon codrops-icon-prev" href="http://sc.chinaz.com/"><span>
				Previous Demo</span></a></li>
        <li><a class="codrops-icon codrops-icon-drop" href="http://sc.chinaz.com/"><span>
				Back to the Codrops Article</span></a></li>
    </ul>
    <header>
        <h1>Google Nexus Website Menu <span>A sidebar menu as seen on 
				the Google Nexus 7 page</span></h1>
    </header>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/gnmenu.js"></script>
<script>
    new gnMenu( document.getElementById( 'gn-menu' ) );
</script>
<div style="text-align:center;clear:both">
    <p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>


</body>
</html>